<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>魏远商城</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<link rel="shortcut icon" href="/favicon.ico">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/style.css" />
		<style type="text/css">
			.yuedu {
				/*font-weight: bold;*/
				color: #E9AF29;
			}
			
			#yuedu {
				text-align: center;
				margin-top: 2.5rem;
				font-size: 14px;
			}
			
			#yuedu>img {
				margin-right: 5px;
				width: 13px;
			}
			
			.resiter-submit {
				margin-top: 5px!important;
			}
			
			.mui-toast-container {
				text-align: center;
				position: fixed;
				z-index: 9999;
				bottom: 50px;
				width: 100%;
				-webkit-transition: opacity .8s;
				transition: opacity .8s;
				opacity: 1
			}
			
			.mui-toast-container {
				display: none
			}
			.email74{
				width: 100%;
			    height: 2.2rem;
			    border: none;
			    border-bottom: 1px solid #eaeef1;
			    /* text-indent: 1rem; */
			    letter-spacing: 2px;
			    position: relative;
			}
		</style>
	</head>

	<body style="background: #eaeef1;">
		<div class="header">
			<h1 style="font-size: 17px;font-weight: 500;">注册</h1>
			<li class="register-back mui-action-back"><img src="img/back-le.png" alt="" height="50%" onclick="history.back(-1)" /></li>
		</div>
		<!--<div class="header">
			<h1>注册</h1>
			<li class="register-back mui-action-back"><img src="img/back-le.png" alt="" height="50%" onclick="history.back(-1)" /></li>
		</div>-->

		<p class="register-content">——————&nbsp;&nbsp;&nbsp;手机号快速注册&nbsp;&nbsp;&nbsp;——————</p>
		<div class="register-phone">
			<input type="text" maxlength="11" id="register-phone-input" class="register-phone-input" placeholder="请输入你的手机号" />
			<input type="button" class="code" id="code" value="获取验证码" />
		</div>
		<input type="text" id="register-code" maxlength="6" class="register-code" placeholder="请输入验证码" />
		<input type="email" class="email74" placeholder="请输入邮箱" />
		<input type="password" class="register-password" placeholder="请输入6-30位数字/英文的密码" />
		<input type="password" class="register-password-again" placeholder="请再次输入密码" />
		
		<div id="yuedu"><img src="img/evaluate3-2.png" />我已经阅读并同意<span class="yuedu">《魏远商城服务协议》</span></div>
		<div id="resiter-submit" class="resiter-submit">注册</div>
		<div class="mui-toast-container" id="mui-toast-container">
			<div class="mui-toast-message"></div>
		</div>
		<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/url.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var mima = /^[A-Za-z0-9]+$/;
			var hm = /^1[34578]\d{9}$/;
			var wait = 59;
			var $code = $("#code");
			var timer;
            var email74 = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
            
			/*function time() {
				if(wait == 0) {
					$code.attr("disabled", false);
					//	$code.value = "获取验证码";
					$code.val("获取验证码");
					wait = 59;
					$('#code').css('background-color', '#e9af29')
					clearInterval(timer);
				} else { // www.jbxue.com
					$code.attr("disabled", true);
					$code.css('background-color', '#c7c2c2');
					$code.val(wait + " s后可重发");
					//$code.value = wait + "s后可重发";
					wait--;

				}
			}*/
			var countdown = 60;
			function settime(obj) {   
				
				/*console.log(obj);*/
				
			    if (countdown == 0) {   
			        obj.removeAttribute("disabled");      
			        obj.value="免费获取验证码";   
			        countdown = 60;   
			        obj.style.backgroundColor="#e9af29"
			        return;  
			    } else {   
			        obj.setAttribute("disabled", true);   
			        obj.value="等待" + countdown + "后可重发";   
			        obj.style.backgroundColor="#c7c2c2"
			        countdown--;   
			        /*console.log(countdown);*/
			    }   
				setTimeout(function() {   
				    settime(obj) }  
				    ,1000)
			}  
			
			

			function pd() {
				$('#mui-toast-container').css('display', 'inline-block')
				//				$('.mui-toast-message').html('请检查您输入的手机号码);
				setTimeout(function() {
					$('#mui-toast-container').css('display', 'none')
				}, 1000)
			}
			
			
			var yd = '1';
			localStorage.xieyi = '1';
			$('#yuedu').on('tap', 'img', function() {
				if(yd % 2 != 0) {
					$('#yuedu>img').attr('src', 'img/evaluate3-1.png');
					localStorage.xieyi = '2';
					yd++;
				} else {
					$('#yuedu>img').attr('src', 'img/evaluate3-2.png');
					localStorage.xieyi = '1';
					yd++;
				}
			});
			
			$('.yuedu').on('tap', function() {
				mui.openWindow({
					url: 'xieyi.html',
					id: 'xieyi.html',
					show: 'pop-in'
				})
			});
			
			$('#code').on('tap', function() {
				
				var phone = $('.register-phone-input').val();
				if(!hm.test(phone)) {
					pd();
					$('.mui-toast-message').html('手机号码不正确，请重新输入');
					//					mui.toast('请检查您输入的手机号码');
					console.log(phone);
					return;
				} else {
					codejk();
				}

				//      手机号码获取验证码接口
				function codejk() {
					//					alert(phone);
					$.ajax({
						url: ur + '/mobilemember/frontmember/getPhoneVerifyCode',
						type: 'post',
						dataType: 'json',
						data: {
							'memberVO.phone': phone,
							'type': '',
							'data': ''
						},
						success: function(data) {
							console.log(JSON.stringify(data))
							var n = data.result.meta.code;
							if(n == '200') {
								console.log('>>>>手机号码获取验证码');
								var obj = document.getElementById('code');
				                   settime(obj);
								pd();
								$('.mui-toast-message').html('已经发送验证码，请注意查收');
								//								mui.toast('已经发送验证码，请注意查收')
							} else if(n == '203') {
								pd();
								$('.mui-toast-message').html('手机号码已经存在');
								//								mui.toast('手机号码已经存在')
							} else if(n == '204') {
								pd();
								$('.mui-toast-message').html('系统出现问题，暂时不能注册');
								//								mui.toast('系统出现问题，暂时不能注册')
							} else {
								pd();
								$('.mui-toast-message').html('不好意思，暂时不能注册');
								//								mui.toast('不好意思，暂时不能注册')
							}
						},
						error: function(e) {
							pd();
							$('.mui-toast-message').html('请检查您的网络...');
							console.log(JSON.stringify(e) + '错愕无');
							//							mui.toast('请检查您的网络...')
						}
					})
				}
			})
			
			
			
			
			
			//					密码和验证码
			$('#resiter-submit').on('tap', function() {
				console.log(localStorage.xieyi)
				var code = $('.register-code').val();
				var password1 = $('.register-password').val();
				var password2 = $('.register-password-again').val();
				var email274 = $('.email74').val();

				if($('#register-phone-input').val() == '') {
					pd();
					$('.mui-toast-message').html('手机号码不能为空，请重新输入');
					//					mui.toast('请检查您输入的手机号码');
				} else if(code == '') {
					pd();
					$('.mui-toast-message').html('验证码不能为空，请重新输入');
					//					mui.toast('请检查您输入的验证码');
					return;
				}else if(email274 == '') {
					pd();
					$('.mui-toast-message').html('邮箱不能为空');
					//					mui.toast('请输入6-30位数字/英文的密码');
					return;
				}else if(!email74.test(email274)) {
					pd();
					$('.mui-toast-message').html('邮箱不符合规格');
					//					mui.toast('请输入6-30位数字/英文的密码');
					return;
				} else if(password1 == '' || password2 == '') {
					pd();
					$('.mui-toast-message').html('密码不能为空，请重新输入');
					//					mui.toast('输入密码不能为空');
					return;
				}else if(password1.length < 6) {
					pd();
					$('.mui-toast-message').html('请输入不小于6位的密码');
					//					mui.toast('请输入6-30位数字/英文的密码');
					return;
				} else if(!mima.test(password1)) {
					pd();
					$('.mui-toast-message').html('请输入6-30位数字/英文的密码');
					//					mui.toast('请输入数字/英文的密码');
					return;
				}  else if((password1 != password2)) {
					pd();
					$('.mui-toast-message').html('两次密码不一致，请重新输入');
					//					mui.toast('两次的密码不一致请检查');
					return;
				} else if(localStorage.xieyi == '2') {
					pd();
					$('.mui-toast-message').html('请阅读并同意协议');
					//					mui.toast('请阅读并同意协议');
					return;
				} else {
					var phone = $('.register-phone-input').val();
					password();
				}

				//密码和验证码接口
				function password() {
					$.ajax({
						type: "post",
						url: ur + "/mobilemember/frontmember/register",
						dataType: 'json',
						data: {
							'memberVO.password': password1,
							'memberVO.phone': phone,
							'phoneCode': code,
							'memberVO.email': email274,
						},
						success: function(data) {
							console.log(JSON.stringify(data) + '注册成功tiaozhuang');
							console.log(data.result.meta.code);
							if(data.result.meta.code == '204') {
								pd();
								$('.mui-toast-message').html('该号码已经注册，请直接登录');
								//								mui.toast('该号码已经注册，请直接登录');
							} else if(data.result.meta.code == '201') {
								pd();
								$('.mui-toast-message').html('验证码输入不正确,请检查');
								//								mui.toast('请检查您输入的验证码');
							} else if(data.result.meta.code == '200') {
								console.log('注册成功');
								mui.toast('注册成功');
								mui.back();
							} else {
								console.log('请检查您的注册信息');
							}
						},
						error: function(e) {
							pd();
							$('.mui-toast-message').html('请检查您的网络...');
							console.log(JSON.stringify(e) + '错误')
							//							mui.toast('请检查您的网络...')
						}
					});
				}

			})
		</script>
	</body>

</html>